<template>
  <div class="feedbackBox">
    <div>
      <h1 class="title">反馈管理</h1>
      <el-empty v-if="!activeFeedback.fid" description="当前未选择反馈单" />
      <div v-else>
        <div class="feedbackTitle">标题：{{activeFeedback.title}}</div>
        <div class="feedbackContent">反馈内容：{{activeFeedback.content}}</div>
        <div class="feedbackContent">
          <span>回复内容：</span>
          <el-input
              v-model="activeFeedback.recover"
              :autosize="{ minRows: 2, maxRows: 5 }"
              type="textarea"
              placeholder="回复内容"
          />
        </div>
        <div class="btnBox">
          <el-button type="danger" @click="deleteFeedback">删除</el-button>
          <el-button type="primary" @click="submit('update')">确认</el-button>
        </div>
      </div>
    </div>
    <!--反馈列表-->
    <div class="feedbackList">
      <el-collapse v-model="activeCollapse" accordion>
        <!--未读-->
        <el-collapse-item :title="'未读 '+unreadList.length" name="未读">
          <el-card
            class="box-card"
            v-for="item in unreadList"
            :key="item.fid"
            @click="setFeedback(item)"
          >
            {{item.title}}
          </el-card>
        </el-collapse-item>
        <!--未回复-->
        <el-collapse-item :title="'未回复 '+readList.length" name="未回复">
          <el-card
            class="box-card"
            v-for="item in readList"
            :key="item.fid"
            @click="setFeedback(item)"
          >
            {{item.title}}
          </el-card>
        </el-collapse-item>
        <!--已回复-->
        <el-collapse-item :title="'已回复 '+repliedList.length" name="已回复">
          <el-card
            class="box-card"
            v-for="item in repliedList"
            :key="item.fid"
            @click="setFeedback(item)"
          >
            {{item.title}}
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
  import {onBeforeMount,reactive,ref} from "vue"
  import {ElMessage} from "element-plus";

  import {http} from "../config/axios/index.js"

  //折叠栏展开项
  let activeCollapse = ref("未读")

  //未读
  const unreadList = reactive([])
  //已读
  const readList = reactive([])
  //已回复
  const repliedList = reactive([])
  //当前展示
  const activeFeedback = reactive({
    fid: null,
    title: "",
    content: "",
    recover: "",
    status: ""
  })

  //获取数据
  async function getData(){
    let type = "error"
    const res = await http({
      method: "GET",
      url: "feedback/get_feedback"
    })
    if(res.data.code === 0){
      type = "success"
      res.data.data.feedbackList.map(item=>{
        if(item.recover && item.recover !== ""){
          //已回复
          repliedList.push(item)
        }else if(item.status === "已读"){
          //已读未回
          readList.push(item)
        }else if(item.status === "送达"){
          //未读
          unreadList.push(item)
        }
      })
    }
    //提示消息
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
  }

  //设置当前展示的反馈
  function setFeedback(item){
    for (let key in item) {
      activeFeedback[key] = item[key]
    }
    submit()
  }

  //提交修改
  async function submit(type){
    const data = {
      fid: activeFeedback.fid,
      recover: activeFeedback.recover,
      status: "已读"
    }
    const res = await http({
      method: "GET",
      url: "feedback/update_feedback",
      params: data
    })
    if(type){
      ElMessage({
        showClose: true,
        message: res.data.msg,
        center: true,
      })
    }
  }

  //删除
  async function deleteFeedback(){
    const res = await http({
      method: "GET",
      url: "feedback/delete_feedback",
      params: {
        fid: activeFeedback.fid
      }
    })
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
    })
  }

  //组件挂载前
  onBeforeMount(()=>{
    getData()
  })
</script>

<style scoped>
  .feedbackBox{
    padding: 20px;
    display: grid;
    grid-template-columns: 60% 40%;
  }
  .feedbackList{
    border-left: 2px solid #cccccc;
    padding: 15px;
    height: calc(100vh - 40px);
    overflow: auto;
  }
  .box-card{
    cursor: pointer;
    margin-top: 10px;
  }
  .feedbackTitle{
    font-size: 20px;
    padding: 10px 0;
  }
  .feedbackContent{
    font-size: 16px;
    line-height: 1.5;
    padding: 5px 0;
  }
  .feedbackContent span{
    padding-bottom: 10px;
    display: block;
  }
  .btnBox{
    padding: 10px 0;
  }
</style>